<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col">
      <view class="fun-flex-row fun-items-center fun-self-stretch group_3" @click="isShowType = !isShowType">
        <text class="text_3">{{selectTypeValue}}</text>
        <image class="fun-ml-2 image_5" src="../../../static/3a60bc02f97ebf6b51ff141294e676e8.png" />
      </view>
      <view class="fun-flex-col fun-justify-start fun-self-stretch fun-relative group_5">
        <view class="fun-flex-col group_6">
          <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_12">
            <text class="font">Quantitative bond strategy Fund</text>
            <view class="fun-flex-col fun-justify-start text-wrapper_5">
				<text class="font_3 text_16">Purchase</text>
			</view>
          </view>
          <text class="fun-self-start font_3 text_7 text_8">Date:2024-5-27</text>
          <view class="fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch group_7">
            <text class="font_3 text_7">100000 shares</text>
            <text class="font_4 text_9">$30,000,00</text>
          </view>
          <view class="fun-self-stretch divider"></view>
          <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_8">
            <text class="font">Quantitative bond strategy Fund</text>
            <view class="fun-flex-col fun-justify-start text-wrapper_3">
              <text class="font_3 text_10">Maturity</text>
            </view>
          </view>
          <text class="fun-self-start font_3 text_7 text_11">Date:2024-5-27</text>
          <view class="fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch group_9">
            <text class="font_3 text_7">100000 shares</text>
            <text class="font_4 text_12">$30,000,00</text>
          </view>
          <view class="fun-self-stretch divider"></view>
          <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_10">
            <text class="font">Quantitative bond strategy Fund</text>
            <view class="fun-flex-col fun-justify-start text-wrapper_4"><text class="font_3 text_13">Other</text></view>
          </view>
          <text class="fun-self-start font_3 text_7 text_14">Date:2024-5-27</text>
          <view class="fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch group_11">
            <text class="font_3 text_7">100000 shares</text>
            <text class="font_4 text_15">$30,000,00</text>
          </view>
          <view class="fun-self-stretch divider"></view>
          <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_12">
            <text class="font">Quantitative bond strategy Fund</text>
            <view class="fun-flex-col fun-justify-start text-wrapper_5">
              <text class="font_3 text_16">Purchase</text>
            </view>
          </view>
          <text class="fun-self-start font_3 text_7 text_17">Date:2024-5-27</text>
          <view class="fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch group_13">
            <text class="font_3 text_7">100000 shares</text>
            <text class="font_4 text_18">$30,000,00</text>
          </view>
          <view class="fun-self-stretch divider"></view>
          <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_14">
            <text class="font">Quantitative bond strategy Fund</text>
            <view class="fun-flex-col fun-justify-start text-wrapper_5">
              <text class="font_3 text_16">Purchase</text>
            </view>
          </view>
          <text class="fun-self-start font_3 text_7 text_19">Date:2024-5-27</text>
          <view class="fun-flex-row fun-justify-between fun-items-baseline fun-self-stretch group_15">
            <text class="font_3 text_7">100000 shares</text>
            <text class="font_4 text_20">$30,000,00</text>
          </view>
        </view>
        <view class="fun-flex-col fun-justify-start section_3 pos_2" v-if='isShowType' @click.self="isShowType = false">
          <view class="fun-flex-col section">
            <view class="fun-flex-row fun-justify-between fun-items-center section_2" @click="selectTypeItem(1,'All Types')">
              <text class="font text_4">All Types</text>
              <image class="image_4" src="../../../static/9bc5e907cc7d0937a96754ec2b2cefb1.png" v-show="selectType == 1"/>
            </view>
            <view class="fun-flex-row fun-justify-between fun-items-start text-wrapper" @click="selectTypeItem(2,'Purchase')">
              <text class="font_2 text_5">Purchase</text>
			  <image class="image_4" src="../../../static/9bc5e907cc7d0937a96754ec2b2cefb1.png" v-show="selectType == 2" />
            </view>
            <view class="fun-flex-row fun-justify-between fun-items-start text-wrapper_2" @click="selectTypeItem(3,'Redemption')">
              <text class="font text_6">Redemption</text>
			  <image class="image_4" src="../../../static/9bc5e907cc7d0937a96754ec2b2cefb1.png" v-show="selectType == 3" />
            </view>
            <view class="fun-flex-row fun-justify-between fun-items-start text-wrapper" @click="selectTypeItem(4,'Withdraw')">
              <text class="font_2 text_5">Withdraw</text>
			  <image class="image_4" src="../../../static/9bc5e907cc7d0937a96754ec2b2cefb1.png"  v-show="selectType == 4"/>
            </view>
            <view class="fun-flex-row fun-justify-between fun-items-start text-wrapper_2" @click="selectTypeItem(5,'Top-Up')">
              <text class="font text_6">Top-Up</text>
			  <image class="image_4" src="../../../static/9bc5e907cc7d0937a96754ec2b2cefb1.png" v-show="selectType == 5" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
		  isShowType:false,
		  selectType:"1",
		  selectTypeValue:"All Types"
	  };
    },

    methods: {
		selectTypeItem(type,value){
			this.selectType = type;
			this.selectTypeValue = value;
			this.isShowType = false
		}
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-25 {
    margin-top: 50rpx;
  }
  .page {
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 68rpx;
      padding-right: 28rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .group_2 {
      padding: 16rpx 32rpx 8rpx;
      .pos {
        position: absolute;
        left: 32rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .text_2 {
        color: #ffffff;
        font-size: 32rpx;
        font-family: SF Pro Display;
        font-weight: 300;
        line-height: 22.82rpx;
      }
    }
    .group_3 {
      padding:32rpx 0 32rpx 120rpx;
      .text_3 {
        color: #21b087;
        font-size: 24rpx;
        font-family: SF Pro Display;
        line-height: 21.5rpx;
      }
      .image_5 {
        width: 32rpx;
        height: 32rpx;
      }
    }
    .group_4 {
      margin-left: 46rpx;
      filter: blur(3.5rpx);
      width: 214rpx;
      height: 8rpx;
    }
    .group_5 {
      margin-top: 60rpx;
	  padding-bottom: 60rpx;
      .group_6 {
        margin-left: 32rpx;
        margin-right: 32rpx;
        padding-bottom: 32rpx;
        border-bottom: solid 2rpx #b0b1bf24;
        .section_4 {
          margin-right: 4rpx;
          background-color: #e06baa;
          border-radius: 4rpx;
          width: 102rpx;
          height: 40rpx;
        }
        .font_3 {
          font-size: 24rpx;
          font-family: SF Pro Display;
          color: #ffffff;
        }
        .text_7 {
          opacity: 0.5;
        }
        .text_8 {
          margin-top: 16rpx;
        }
        .group_7 {
          margin-top: 28rpx;
        }
        .divider {
          margin-right: 4rpx;
          margin-top: 28rpx;
          background-color: #b0b1bf24;
          height: 2rpx;
        }
        .group_8 {
          margin-top: 32rpx;
          .text-wrapper_3 {
            padding: 8rpx;
            background-color: #88a7ea;
            border-radius: 4rpx;
          }
        }
        .text_11 {
          margin-top: 16rpx;
        }
        .group_9 {
          margin-top: 28rpx;
        }
        .font_4 {
          font-size: 28rpx;
          font-family: SF Pro Display;
          color: #e85353;
        }
        .group_10 {
          margin-top: 32rpx;
          .text-wrapper_4 {
            padding: 8rpx;
            background-color: #515151;
            border-radius: 4rpx;
          }
        }
        .text_14 {
          margin-top: 16rpx;
        }
        .group_11 {
          margin-top: 28rpx;
        }
        .group_12 {
          margin-top: 32rpx;
        }
        .text_17 {
          margin-top: 16rpx;
        }
        .group_13 {
          margin-top: 28rpx;
        }
        .group_14 {
          margin-top: 32rpx;
        }
        .text-wrapper_5 {
          padding: 8rpx;
          background-color: #e85353;
          border-radius: 4rpx;
        }
        .text_19 {
          margin-top: 16rpx;
        }
        .group_15 {
          margin-top: 28rpx;
        }
      }
      .section_3 {
        height: 100%;
        background-color: #00000080;
        .section {
          background-color: #00033b;
          .section_2 {
            padding: 20rpx 32rpx;
            background-color: #00033b;
            border-bottom: solid 2rpx #ffffff1a;
          }
          .text-wrapper {
            padding: 32rpx 0;
            background-color: #00033b;
            border-bottom: solid 2rpx #ffffff1a;
            .font_2 {
              font-size: 28rpx;
              font-family: SF Pro Display;
              color: #ffffff;
            }
            .text_5 {
              margin-left: 32rpx;
            }
          }
          .text-wrapper_2 {
            padding: 36rpx 0 28rpx;
            background-color: #00033b;
            border-bottom: solid 2rpx #ffffff1a;
            .text_6 {
              margin-left: 32rpx;
            }
          }
        }
      }
      .pos_2 {
		  width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
      }
      .font {
        font-size: 28rpx;
        font-family: SF Pro Display;
        color: #ffffff;
      }
    }
    .image_4 {
      width: 48rpx;
      height: 48rpx;
    }
  }
</style>